<template>
	<div class="wrapper distributionOperation_box">
		<el-form>
		    <el-form-item label="知产："> 
		    	<el-col :span="4">
		    		<div>
		    			<el-input  readonly placeholder="知产" v-model="distributionOperation.knowledge" size="small" @focus="getKnowledgeData" icon="el-icon-search" ></el-input>
		    		</div> 
		    	</el-col>
		    </el-form-item>
		    <el-form-item label="购买："> 
		    	<el-col :span="4">
		    		<div>
		    			<el-input  readonly placeholder="购买" v-model="distributionOperation.buy" size="small" icon="el-icon-search" @focus="getBuyData" ></el-input>
		    		</div> 
		    	</el-col>
		    </el-form-item>
		    <el-form-item label="对接："> 
		    	<el-col :span="4">
		    		<div>
		    			<el-input  readonly placeholder="对接" v-model="distributionOperation.docking" size="small" icon="el-icon-search"  @focus="getDockingData"></el-input>
		    		</div> 
		    	</el-col>
		    </el-form-item>
		    <el-row class="action_row" >
		        <el-col :span="2">
		          <el-button type="primary" :disabled='disabled'  @click="onSubmit('brandDetail')" size="small"><i class="fa fa-save"></i> 确定</el-button>
		        </el-col>
		        <el-col :span="2">
		          <el-button type="danger"  @click="close" size="small"><i class="fa fa-sign-out"></i> 取消</el-button>
		        </el-col>
		    </el-row>
		</el-form>
		 <!--*****************知产员框************-->
		 <div v-if="dialogVisible">
		 	<el-dialog :title="titleName" :visible.sync="dialogVisible" @close="closeOwnerDialog">
				<el-row style="margin-bottom: 20px">
					<el-col :span="7">
						<el-select v-model="ownerFilter.deptId" placeholder="请选择部门" size="small" @change="selectSeller" >
							<el-option v-for="(item,index) in ownerOptions" :key="index" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-col>
					<el-col :span="6" class='elCol'>
						<el-checkbox v-model="checked1">{{checkBoxName1}}</el-checkbox>
						<el-checkbox v-model="checked2">{{checkBoxName2}}</el-checkbox>
					</el-col>
				</el-row>
				<el-table class="seller-table" :data="ownerData" border style="width: 100% max-height:541px" highlight-current-row  @current-change="highlightDialog" @row-click="selectUser">
					<el-table-column type="index" width="55" align="center"></el-table-column>
					<el-table-column prop="account" label="用户名" width="" align="center"></el-table-column>
					<el-table-column prop="name" label="用户姓名" align="center"></el-table-column>
					<el-table-column prop="departmentName" label="部门" align="center"></el-table-column>
				</el-table>
				<el-row class="paging">
					<el-pagination @current-change="ownerHandleCurrentChange" @size-change="ownerHandleSizeChange" :current-page="ownerPage.pageNum" :page-sizes="ownerPage.pageSizes" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="ownerPage.total">
					</el-pagination>
				</el-row>
	
				<el-row style="margin-top: 20px">
					<el-col :span="12">
						<el-button type="primary" class="top_save" @click="onDialogSubmit" size="small"><i class="fa fa-save"></i>　保 存</el-button>
					</el-col>
					<el-col :span="12">
						<el-button type="danger" class="top_close" @click="dialogVisible = false" size="small"><i class="fa fa-sign-out"></i> 关 闭</el-button>
					</el-col>
				</el-row>
			</el-dialog>
		 </div>
		
		 
		 
	</div>
</template>

<script>
	import Vue from 'vue'
	import {mapGetters} from 'vuex'
	import {Form,FormItem,Col,Button,Input,Row,Dialog,Table,TableColumn,Select,Checkbox,Pagination,Option,Message} from 'element-ui'
	
	Vue.use(Form)
	Vue.use(FormItem)
	Vue.use(Col)
	Vue.use(Row)
	Vue.use(Button)
	Vue.use(Input)
	Vue.use(Dialog)
	Vue.use(Table)
	Vue.use(TableColumn)
	Vue.use(Select)
	Vue.use(Checkbox)
	Vue.use(Pagination)
	Vue.use(Option)
	Vue.prototype.$message = Message;
	export default {
		head(){
			return {
				title: this.title
			}
		},
		
		data(){
			return {
				tabName: '分配运营',
				title: '分配运营',
				titleName:'',
				brandIds:[],//要分配的品牌Id
				knowledgeAssigneId:'',//要分配的知产人员Id
				buyAssigneId:'',//要分配的购买人员Id
				dockingAssigneId:'',//要分配的对接人员Id
				disabled:true,
				distributionOperation:{
					knowledge:'',
					buy:'',
					docking:''
				},
				assigneId:[],
				assigneType:[],
				assigneName:[],
				
				checkBoxName1:'',
				checkBoxName2:'',
				checked1:false,
				checked2:false,
				
				
				dialogCurrentRow: null,// dialog高亮的行
				dialogVisible:false,
				transSelectedUserName:null,
				transSelectedUserId:'',
				ownerOptions: [],//销售员部门下拉
				ownerData: [],//销售员弹窗的表格总信息
				ownerFilter: {
					pageNum: 1,//销售员的弹窗请选择部门
					pageSize: 10,
					deptId: ''
				},
				ownerPage: {
					pageSizes: [10, 20, 50], // 销售员弹窗的，每页可选条数列表
					total: 0,
					pageNum: 1
				},
				knowledgeIds:[],
			}
		},
		 computed : {
            ...mapGetters({
                'pageTabsList': 'getPageTabsList'
            }),
		},
		mounted(){
			this.getUrl()
			this.getOwnerDeptment()
			this.getUserOwnerData()
		},
		methods:{
			onSubmit(){
				this.assigneId=[]
				this.assigneType=[]
				this.assigneName=[]
				if (this.distributionOperation.knowledge) {
					this.assigneName.push(this.distributionOperation.knowledge)
					this.assigneId.push(this.knowledgeAssigneId)
					this.assigneType.push(1)
				}
				if (this.distributionOperation.buy) {
					this.assigneName.push(this.distributionOperation.buy)
					this.assigneId.push(this.buyAssigneId)
					this.assigneType.push(2)
				}
				if (this.distributionOperation.docking) {
					this.assigneName.push(this.distributionOperation.docking)
					this.assigneId.push(this.dockingAssigneId)
					this.assigneType.push(3)
				}
				this.$store.dispatch('distributePerson',{'brandIds':this.brandIds,'assigneName':this.assigneName.join(","),'assigneId':this.assigneId.join(","),'assigneType':this.assigneType.join(",")})
					.then((response) => {
						if(response.data.successed==true){
							this.$message({
						          message: '分配成功',
						          type: 'success'
					        });
				            this.$router.push({path: '/brandadmin'});
						}
	                })
				
			},
			close(){
				window.history.go(-1);
			},
			
			//获取销售员部门下拉框
			getOwnerDeptment() {
				this.$store.dispatch('getOwnerDeptment')
					.then((response) => {
						if(!response) {
							return
						}
						var result = response.data;
						if(result.code === 0) {
							this.ownerOptions = result.data;
						}
					})
			},
			getKnowledgeData(){
				this.titleName='知产'
				this.checkBoxName1='购买'
				this.checkBoxName2='对接'
				this.dialogVisible=true
				this.getOwnerDeptment();
			},
			getBuyData(){
				this.titleName='购买'
				this.checkBoxName1='知产'
				this.checkBoxName2='对接'
				this.dialogVisible=true
				this.getOwnerDeptment();
			},
			getDockingData(){
				this.titleName='对接'
				this.checkBoxName1='知产'
				this.checkBoxName2='购买'
				this.dialogVisible=true
				this.getOwnerDeptment();
			},
			
			closeOwnerDialog() {
				console.log(1)
				console.log(this.dialogCurrentRow)
				this.checked1=false,
				this.checked2=false,
				this.dialogCurrentRow = null;// 清除高亮的行
				this.transSelectedUserName = null; // 清除选择的用户
				this.transSelectedUserId='' //清除选择用户的ID
				this.ownerFilter.deptId = '';
				this.ownerFilter.pageNum = 1;
				this.ownerFilter.pageSize = 10;
				this.dialogVisible = false
				console.log(this.dialogCurrentRow)
			},
			
			// dialog 用户列表单击选择高亮
            highlightDialog (val) {
                this.dialogCurrentRow = val;
            },
            // 选择分配到的用户
            selectUser (row, event, column) {
                this.transSelectedUserName = row.name;
                this.transSelectedUserId = row.id;
            },
			// 知产员 弹框列表选择分页
			ownerHandleCurrentChange(val) {
				this.ownerFilter.pageNum = val;
				this.getUserOwnerData();
			},
			// 知产员弹框列表选择分页size
			ownerHandleSizeChange(val) {
				this.ownerFilter.pageSize = val;
				this.ownerFilter.pageNum = 1;
				this.getUserOwnerData();
			},
			
			
			
			//获取销售员列表
            getUserOwnerData() {
                this.$store.dispatch('getUserOwnerData',this.ownerFilter)
                  .then((response) => {
                    if(!response){return}
                    var result = response.data;
                    if (result.code === 0) {
                        this.ownerData = result.data.list;
                        this.ownerPage.total = result.data.total;
                        this.ownerPage.pageNum = result.data.pageNum;
                    }
                })
            },
			
			selectSeller(val) {
                this.getUserOwnerData();
            },
			
			//知产员弹窗的 保存 
			onDialogSubmit() {
				this.dialogVisible = false;
				if(this.titleName=='知产'){
					this.distributionOperation.knowledge = this.transSelectedUserName;
					this.knowledgeAssigneId=this.transSelectedUserId
					if(this.checked1==true){
						this.distributionOperation.buy = this.transSelectedUserName;
						this.buyAssigneId=this.transSelectedUserId
						
					}
					if(this.checked2==true){
						this.distributionOperation.docking = this.transSelectedUserName;
						this.dockingAssigneId=this.transSelectedUserId
					}
					if(this.checked1==true&&this.checked2==true){
						this.distributionOperation.buy = this.transSelectedUserName;
						this.distributionOperation.docking = this.transSelectedUserName;
						this.buyAssigneId=this.transSelectedUserId
						this.dockingAssigneId=this.transSelectedUserId
					}
				}
				if(this.titleName=='购买'){
					this.distributionOperation.buy = this.transSelectedUserName;
					this.buyAssigneId=this.transSelectedUserId
					if(this.checked1==true){
						this.distributionOperation.knowledge = this.transSelectedUserName;
						this.knowledgeAssigneId=this.transSelectedUserId
					}
					if(this.checked2==true){
						this.distributionOperation.docking = this.transSelectedUserName;
						this.dockingAssigneId=this.transSelectedUserId
					}
					if(this.checked1==true&&this.checked2==true){
						this.distributionOperation.knowledge = this.transSelectedUserName;
						this.distributionOperation.docking = this.transSelectedUserName;
						this.knowledgeAssigneId=this.transSelectedUserId
						this.dockingAssigneId=this.transSelectedUserId
					}
				}
				if(this.titleName=='对接'){
					this.distributionOperation.docking = this.transSelectedUserName;
					this.dockingAssigneId=this.transSelectedUserId
					if(this.checked1==true){
						this.distributionOperation.knowledge = this.transSelectedUserName;
						this.knowledgeAssigneId=this.transSelectedUserId
					}
					if(this.checked2==true){
						this.distributionOperation.buy = this.transSelectedUserName;
						this.buyAssigneId=this.transSelectedUserId
					}
					if(this.checked1==true&&this.checked2==true){
						this.distributionOperation.knowledge = this.transSelectedUserName;
						this.distributionOperation.buy = this.transSelectedUserName;
						this.knowledgeAssigneId=this.transSelectedUserId
						this.buyAssigneId=this.transSelectedUserId
					}
				}
				if (!this.distributionOperation.knowledge && !this.distributionOperation.buy && !this.distributionOperation.docking) {
					this.disabled=true
				}else{
					this.disabled=false
				}
			},
			
			
			//取Url参数
			getUrl() {
			    var url = location.search; 
			    var theRequest = new Object();
			    var idList=[]
			    if (url.indexOf("?") != -1) {
			        var str = url.substr(1);
			        var strs = str.split("&");
			        for(var i = 0; i < strs.length; i ++) {
			        	idList.push(Number(strs[i].split("=")[1]))
			            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
			        }
			    }
			    this.brandIds=idList
			    this.brandIds=this.brandIds.join(',')
			}
			
			
		},
		created() {
			//pageTab
			if(process.BROWSER_BUILD) {
				if(this.pageTabsList[this.pageTabsList.length - 1].name == 'CRM') {
					let arr = this.pageTabsList;
					arr[arr.length - 1].name = this.tabName;
					this.$store.commit('PAGETABSLIST', {
						data: arr
					})
				}
			}
		},
	}
	
</script>

<style lang="scss">
	.distributionOperation_box{
		.action_row{
			margin-top: 45px;
			margin-left: 60px;
		}
		.elCol{
			margin-top: 4px;
		}
		.top_close,
		.top_save {
			margin: 0 20px;
		}
		.top_save {
			float: right;
		}
	}
	.current-row{
		background: #c9e5f5 !important;
	}


</style>